<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>自动建群</el-breadcrumb-item>
            </el-breadcrumb>

            <el-card class="box-card">
                <!-- 搜索筛选 -->
                <el-form :inline="true" :model="formInline">
                    <el-form-item label="">
                        <el-input size="small" v-model="formInline.groupName" placeholder="任务名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input size="small" v-model="formInline.lordName" placeholder="员工名称"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <div class="block">
                            <el-date-picker size="small"
                                            v-model="formInline.createTime"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            align="right">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" type="primary" @click="search">查询</el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-card>

            <el-card class="box-card">
                <!-- 按钮 -->
                <el-form :inline="true">
                    <el-form-item>
                        <el-button size="small" icon="el-icon-plus" type="primary" @click="currentHandler('save')">
                            新建群聊
                        </el-button>
                        <el-button size="small" type="primary" @click="">删除</el-button>
                    </el-form-item>
                </el-form>

                <!--列表-->
                <el-table size="small" :data="listData" highlight-current-row v-loading="loading"
                          element-loading-text="拼命加载中" style="width: 100%;">
                    <el-table-column align="center" type="selection" width="60">
                    </el-table-column>
                    <el-table-column prop="taskName" label="任务名称" width="200">
                    </el-table-column>
                    <el-table-column prop="groupName" label="负责员工" width="150">
                    </el-table-column>
                    <el-table-column prop="groupTag" label="添加客户数" width="200">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="120">
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="150">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="">下载二维码</el-link>
                            <el-link type="primary" @click="currentHandler('detail')">详情</el-link>
                            <el-link type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="display: flex; justify-content: flex-end;">
                    <div style="width: 450px; height: 60px;">
                        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
                    </div>
                </div>
            </el-card>
        </div>


        <!-- 编辑 -->
        <el-dialog title="编辑" :visible.sync="wordsFormVisible" width="40%" @click="handleClosr">
            <el-form ref="form" :model="wordsForm" label-width="80px">

                <el-form-item label="任务名称">
                    <el-input v-model="wordsForm.name"></el-input>
                </el-form-item>

                <el-form-item label="负责员工">
                    <el-input v-model="wordsForm.name"></el-input>
                </el-form-item>

                <el-form-item label="添加客户">
                    <el-input v-model="wordsForm.name"></el-input>
                </el-form-item>

                <el-form-item label="创建时间">
                    <el-input v-model="wordsForm.name"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="handleClosr">取消</el-button>
                <el-button size="mini" type="primary" @click="">确定</el-button>
            </div>
        </el-dialog>


        <div v-if="currentPanel == 'save'">
            <AutoCreateSave @currentHandler="currentHandler"></AutoCreateSave>
        </div>

        <div v-if="currentPanel == 'detail'">
            <AutoCreateDetail @currentHandler="currentHandler"></AutoCreateDetail>
        </div>
    </div>
</template>

<script>
    import AutoCreateSave from "./save";
    import AutoCreateDetail from "./detail";

    import Pagination from '@/components/Pagination'

    export default {
        data() {
            return {
                // 编辑信息
                wordsForm: {},
                // 编辑显示
                wordsFormVisible: false,

                radio: '',
                currentPanel: 'list',
                editForm: {
                    deptId: '',
                    deptName: '',
                    deptNo: '',
                    token: localStorage.getItem('logintoken')
                },
                formInline: { // 搜索框内容对象
                    page: 1,
                    limit: 10,
                    varLable: '',
                    varName: '',
                    token: localStorage.getItem('logintoken')
                },
                listData: [], // 用户数据
                data: {
                    id: '',
                    groupName: '',
                    lordName: '',
                    groupTag: '',
                    createTime: ''
                },
                loading: false, // true显示加载

                options: [{
                    value: '',
                    label: ''
                }],
                // rules表单验证
                rules: {
                    deptName: [
                        {required: true, message: '请输入部门名称', trigger: 'blur'}
                    ],
                    deptNo: [{required: true, message: '请输入部门代码', trigger: 'blur'}]
                },
                // 分页参数
                pageparm: {
                    currentPage: 1,
                    pageSize: 10,
                    total: 0
                },
            }
        },

        // 注册组件
        components: {
            Pagination,
            AutoCreateSave,
            AutoCreateDetail
        },

        /**
         * 创建完毕
         */
        created() {
            this.getdata(this.formInline)
        },

        methods: {
            getdata(parameter) {
                this.loading = true
                // 模拟数据开始
                let res = {
                    code: 0,
                    msg: null,
                    count: 5,
                    data: [
                        {
                            taskName: '新建任务',
                            groupName: '乔峰',
                            groupTag: '500',
                            createTime: '2021-10-25'
                        }
                    ]
                }
                this.loading = false
                this.listData = res.data
            },
            // 分页插件事件
            callFather(parm) {
                this.formInline.page = parm.currentPage
                this.formInline.limit = parm.pageSize
                this.getdata(this.formInline)
            },
            // save
            currentHandler(name) {
                this.currentPanel = name
            },
            // 查询
            search() {
                this.getdata(this.formInline)
            },
            // 重置
            reset() {

            },
            // 话术编辑
            handleEdit: function (index, row) {
                this.wordsFormVisible = true

                this.wordsForm.deptId = row.deptId
                this.wordsForm.deptName = row.deptName
                this.wordsForm.deptNo = row.deptNo
            },
            // 新建话术关闭
            handleClosr() {
                this.wordsFormVisible = false;
            },
        }
    }
</script>

<style scoped>
    .user-search {
        margin-top: 20px;
    }

    .el-link {
        margin: 0 20px;
    }

    .el-card {
        margin-top: 30px;
    }
</style>
